<template>
  <el-card class="holiday-card" shadow="hover" @click="handleClick" @mouseenter="cardType = 'primary'" @mouseleave="cardType = ''">
    <div class="card-header">
      <el-text size="large" :type="cardType">{{ item.dictLabel }}</el-text>
    </div>
    <div class="holiday-card-container">
      <el-icon size="80px"><component :is="iconItemList[item.dictValue]" /></el-icon>
      <div class="holiday-card-extra">
        <div v-if="holidayItem?.monthPaidNum">
          <el-space>
            <el-text class="mx-1" :type="cardType">月带薪假：</el-text>
            <el-text class="mx-1" :type="cardType" size="large">{{ holidayItem?.monthPaidNum }}</el-text>
          </el-space>
        </div>
        <div v-if="item.dictValue <= 1">
          <el-space>
            <el-text class="mx-1" :type="cardType">去年结余：</el-text>
            <el-text class="mx-1" :type="cardType" size="large">{{ holiday3 }}</el-text>
          </el-space>
        </div>
        <div>
          <el-space>
            <el-text class="mx-1" :type="cardType">本年共计：</el-text>
            <el-text class="mx-1" :type="cardType" size="large">{{ holiday }}</el-text>
          </el-space>
        </div>
        <div>
          <el-space>
            <el-text class="mx-1" :type="cardType">已经使用：</el-text>
            <el-text class="mx-1" :type="cardType" size="large">{{ holiday2 }}</el-text>
          </el-space>
        </div>
        <div v-if="holidayItem?.monthWarnlum">
          <el-space>
            <el-text class="mx-1" :type="cardType">最大限制：</el-text>
            <el-text class="mx-1" :type="cardType" size="large">{{ holidayItem?.monthWarnNum }}</el-text>
          </el-space>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { watchEffect, ref } from 'vue'
import iconItemList from '../../global/iconItem'

const emits = defineEmits(['click'])

const props = defineProps({
  item: { type: Object as any, default: () => ({}) },
  userName: { type: String, default: '', required: true },
  yearNum: { type: Number, default: new Date().getFullYear(), required: true },
  rowsHoliday: { type: Array as any, default: () => [], required: true },
  rowsLeave: { type: Array as any, default: () => [], required: true },
})

const holiday = ref(0)
const holiday2 = ref(0)
const holiday3 = ref(0)
const cardType = ref('')
const holidayItem = ref<any>(null)

watchEffect(async () => {
  const item = props.rowsHoliday.find((item: any) => item.holidayCategory === props.item.dictValue)
  if (item) {
    holiday.value = item.holidayNum
    holiday2.value = item.holidayUsedNum
    holiday3.value = item.holidayBalanceNum
    holidayItem.value = item
    // console.log(item.monthPaidNum)
    // console.log(item.monthWarnlum)
  }
})

const handleClick = () => {
  emits('click', props.item)
}
</script>
<style lang="scss" scoped>
.holiday-card {
  width: 250px;
  cursor: pointer;
  &:hover {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary-light-5);
    background-color: var(--el-color-primary-light-9);
    .card-header {
      border-bottom-color: var(--el-color-primary-light-5);
    }
  }
  .card-header {
    margin: -10px -20px 20px;
    padding-bottom: 8px;
    text-align: center;
    border-bottom: 1px solid var(--el-border-color-light);
    transition: border-bottom 0.3s ease-in-out;
  }
  .category-result {
    padding: 0 10px;
  }
  .holiday-card-extra {
    margin-left: 12px;
    color: var(--el-color-primary) !important;
  }
  .holiday-card-container {
    margin: 0px -10px -10px;
    display: flex;
    align-items: center;
  }
}
</style>
